<div [class]="model.cssClasses.root" (dragenter)="model.onDragEnter($event)" (dragover)="model.onDragOver($event)"
  (drop)="model.onDrop($event)" (dragleave)="model.onDragLeave($event)" (keydown)="model.onKeyDown($event)"
  #contentElement>
  <input type="text" [disabled]="model.isTextInputReadOnly" [class]="model.cssClasses.control"
    [value]="model.renderedValue ||''" (change)="model.onInputChange($event)" (blur)="model.onInputBlur($event)"
    [attr.placeholder]="model.renderedPlaceholder" />
  <input type="file" [disabled]="model.isInputReadOnly" [class]="model.cssClasses.fileInput" [attr.id]="model.inputId"
    [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel"
    [attr.aria-invalid]="model.ariaInvalid" [attr.aria-describedby]="model.ariaDescribedBy" [attr.multiple]="false"
    [title]="model.inputTitle" [accept]="model.acceptedTypes" (change)="model.onFileInputChange($event)" tabindex="-1">
  <div [class]="model.cssClasses.buttonsContainer">
    <button type="button" [class]="model.cssClasses.clearButton" [disabled]="model.getIsClearButtonDisabled()"
      (click)="model.doClean()" [key2click] [title]="model.clearButtonCaption">
      <svg [iconName]="model.cssClasses.clearButtonIcon" size="'auto'" sv-ng-svg-icon></svg>
    </button>
    <label [class]="model.getChooseButtonCss()" [attr.for]="model.inputId" [attr.aria-label]="model.chooseButtonCaption"
      (click)="model.chooseFiles($event)" [key2click]>
      <svg [iconName]="model.cssClasses.chooseButtonIcon" size="'auto'" [title]="model.chooseButtonCaption"
        sv-ng-svg-icon></svg>
    </label>
  </div>
</div>